import React from 'react';

export default function SomethingTodo(props){
    const divStyle={
        width:'60%',
        margin:'0 auto',
        border:'solid 1px white'
    }
    const doneStyle={
        fontSize:'23px',
        font:'微软雅黑',
        color:'#FFB90F',
    }
    const notdoneStyle={
        fontSize:'23px',
        font:'微软雅黑',
        color:'#FF0000',
    }
    const delBtnStyle={
        marginLeft:'5px',
        width:'60px',
        height:'25px',
        fontSize:'15px',
        color:'white',
        backgroundColor:'#8B1C62',
        border:'0'
    }
    const statusBtnStyle={
        marginLeft:'5px',
        width:'100px',
        height:'25px',
        fontSize:'15px',
        color:'white',
        backgroundColor:'#CD3333',
        border:'0'
    }
    const liStyle=props.isCompleted?doneStyle:notdoneStyle;
    return <div style={divStyle}>
        <li style={liStyle}>{props.name}</li>
        <button style={statusBtnStyle} onClick={props.statusChangeHandler}> {props.isCompleted ? '已完成' : '未完成'}</button>
        <button style={delBtnStyle} onClick={props.deleteStudentHandler}>删除</button>
    </div>


}